<template>
    <div class="el-tabs-box">
        <el-tabs v-model="value" type="border-card" @tab-click="tabClickHandle"  @tab-change="tabChangeHandle">
        <slot></slot>
    </el-tabs>
    </div>
  
</template>

<script setup>
import { ref } from 'vue';
const props = defineProps({
    value: String
})
const emit = defineEmits(['tab-click', 'tab-change'])
const value = ref(props.value)
const tabClickHandle = (tabName)=>{
     emit("tab-click", tabName)
}
const tabChangeHandle = (tabName) => {
    emit("tab-change", tabName)
}
</script>
<style lang="scss" scoped>
.el-tabs-box{
    :deep(.el-tabs) {
    --el-tabs-header-height: 25px;
    --el-font-size-base: 12px;
    font-size: 12px;
}

:deep(.el-tabs__header) {
    margin: 0 0 5px;
}

:deep(.el-tabs__nav) {
    border-radius: 0px 0px 0 0;
}
:deep(.el-tabs--border-card>.el-tabs__content){
    padding: 0px 10px 10px 10px
}
}

</style>
